<template>
  <view class="container-comment">
    <navbar :config="config" backColor="#fff"></navbar>
    <view class="mian">
      <view class="h z-flex">
        <view class="label">订单号：</view>{{orderNo}}
      </view>
      <view class="h z-flex">
        <view class="label">评分：</view>
        <u-rate :count="5" v-model="level" inactive-color="#cccccc" active-color="#FFC336"></u-rate>
      </view>
      <view class="h">
        <view class="label mb15">评价：</view>
        <u-input v-model="content" type="textarea" border placeholder="请输入店铺评价" height="214" maxlength="600"
          border-color="#d9d9d9" />
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="submit">确认提交</view>
    </view>
  </view>
</template>

<script>
  import rate from "@/components/rate.vue"
  export default {
    components: {
      rate
    },
    data() {
      return {
        config: {
          back: true,
          title: '订单评价',
          color: '#fff',
          backgroundColor: [1, "#FF721B"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        content: '',
        level: 0,
        orderId: '',
        orderNo: '',
      }
    },
    onLoad(options) {
      if (options && options.orderId && options.orderNo) {
        this.orderId = options.orderId
        this.orderNo = options.orderNo
      }
    },
    methods: {
      submit() {
        if (!this.level) {
          return this.$mUtil.toast('请选择评分')
        }
        if (!this.content) {
          return this.$mUtil.toast('评价必填项')
        }
        this.$http.post('/comment/orderGoods/saveunionbusiness', {
          content: this.content,
          level: this.level,
          order_id: this.orderId
        }).then(res => {
          if (res.code == 200) {
            this.$mUtil.toast('评价成功')
            setTimeout(() => {
              uni.redirectTo({
                url: `/pages/workbench/order/detail?orderId=${this.orderId}&isMine=true`
              })
            }, 1000)
          }
        })
      }
    }
  }
</script>

<style lang="scss" lang="scss">
  .container-comment {
    .mian {
      padding: 48rpx 30rpx;
    }

    .z-flex {
      display: flex;
      align-items: center;
    }

    .mb15 {
      margin-bottom: 15rpx;
    }

    .h {
      margin-bottom: 10rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #808080;

      .label {
        color: #1a1a1a;
      }
    }

    .footer {
      width: 100%;
      padding: 30rpx 60rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;

      .btn {
        width: 100%;
        color: #fff;
        text-align: center;
        line-height: 85rpx;
        border: 1rpx solid #FF721B;
        border-radius: 44rpx;
        background-color: #FF721B;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
      }

      .online-btn {
        color: #FF721B;
        border: 1rpx solid #FF721B;
        background-color: #e7eefc;
      }
    }
  }
</style>
